<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/ztree/css/ztree-bootstrap.css"/>
    <script src="/jquery/jquery.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/ztree/js/jquery.ztree.core.js"></script>
    <script src="/ztree/js/jquery.ztree.excheck.js"></script>
    <script src="/ztree/js/jquery.ztree.exedit.js"></script>


</head>

<style>
    .searchdiv{
        background: #fff;
        border-radius: 6px;margin-top: 10px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        padding: 10px;
    }
</style>

<body style="background-color: #f3f3f4;">


<div class="searchdiv">
        <div class="layui-row layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label" style="width: 100px;">用户名：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs3" style="padding-left:20px; ">
                <button type="button" class="layui-btn" id="btn_query">查询</button>
            </div>
        </div>
</div>

    <div class="searchdiv">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>


    <div id="UserRole" style="display: none">
        <ul id="permissionTree" class="ztree"></ul>
        <button type="button" class="layui-btn" id="saveRole">保存</button>

    </div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">踢出</a>
</script>

<script src="/layui/layui.all.js" charset="utf-8"></script>

<script>

    ;!function(){
        var table = layui.table;
        var $ = layui.jquery,layer = layui.layer;

        //第一个实例
        var tableIns = table.render({
            elem: '#test'
            ,height: 312
            ,where: {}
            ,url: '/online/user/list' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                    {field: 'sessionId', title: '会话id',width:380,align:'center',fixed: 'left'}
                    ,{field: 'username', title: '用户名',align:'center'}
                    ,{field: 'host', title: '主机地址', sort: true}
                    ,{field: 'lastAccess', title: '最后访问时间'}
                    ,{fixed: 'right', title:'操作', width:120,align:'center',toolbar: '#barDemo'}
                ]
            ]
        });

        $("#btn_query").click(function(){
            tableIns.reload({
                where:{
                    username:$("input[name=username]").val()
                },page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                parent.layer.confirm('真的要踢出该用户码?', function(index){
                    $.ajax({
                        url:"/online/user/kickout",
                        type:"post",
                        dataType:"json",
                        data:{
                            sessionId:data.sessionId,
                            username:data.username
                        },
                        success:function(ret){
                            if(ret.ret){
                                obj.del();
                                parent.layer.msg("踢出成功!");
                            }
                        },
                        error:function(data){
                            parent.layer.msg(data.msg);
                        }
                    })
                    parent.layer.close(index);
                });
            }
        });
    }();
</script>
<script>

</script>
</body>

</html>
